import React from  "react";
import "../css/Counter.css";
import {connect} from "react-redux";
import {plusAction,minusAction} from "../Redux/actions";

class Counter extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div className="counter_container">
        <button onClick={()=>{
          this.props.plus(plusAction())
        }}>+</button>
        <div>{this.props.count}</div>
        <button onClick={()=>{
          this.props.minus(minusAction())
        }}>-</button>
      </div>
    )
  }
}

//读取定义在redux中的state
function mapStateToProps(rootReducer){
  return{
    count:rootReducer.countReducer.count
  }
}

function mapActionToProps(dispatch){
  return{
    plus:(action)=>{dispatch(action)},
    minus:(action)=>{dispatch(action)}
  }
}

export default connect(mapStateToProps,mapActionToProps)(Counter) ;


//模拟connect  redux
//定义在store
// function connect(mapStateToProps,mapActionToProps){
//    var state = mapStateToProps(rootReducer);//{count:}
//    var action = mapActionToProps(dispatch);

//    return function(component){
//      //将rootReducer返回state放入组件的props中
//      component.props={...state};
//      component.props={...action};
//      return component;
//    }
// }

// var user  = {
//   name:"111",
//   age:10
// }

// var  user1 = {...user}